<template>
  <div class="back">
    <el-container>
      <el-header height="10%">
        <div class="header-div">
          <img class="img-title" src="@/assets/img/index/title.png"/>
          <div class="header-font">桐庐县江南镇人民政府</div>
        </div>
        <div style="width:400px;margin-top:15px;margin-right:18px">
          <el-input v-model="search" placeholder="搜索" style="width: 380px; position: relative; padding-right: 15px;" size="small" @keyup.enter.native="doSearch">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="doSearch" style="position: absolute; right: 15px;"></i>
          </el-input>
        </div>
        <div class="user">
          <span class="username">{{username}}</span>
          <span><el-avatar :size="40" :src="avatar"></el-avatar></span>
        </div>
      </el-header>
      <el-container>
        <el-aside width="10%">
          <div class="left-region">
            <div class="goback" @click="back">
              <img class="img-back" src="@/assets/img/back.png"/>
              <span>返回</span>
            </div>
            <div :class="['nav',{'active':show[0]}]" @click="showMeet">请假流程</div>
            <div :class="['nav',{'active':show[1]}]" @click="showMess">加班申请</div>
          </div>
        </el-aside>
        <el-main>
          <div class="right-region">
            <div class="newMeet" v-show="show[0]">
              <div class="meet-head">
                <div>基本信息</div>
                <div class="meet-button-all">
                  <el-button class="meet-button" size="mini">提交</el-button>
                  <el-button class="meet-button" size="mini">保存</el-button>
                </div>
              </div>
              <div class="division"></div>
              <div class="meet-up" >
                <table class="meet-fl-table" style="width: 100%">
                  <tr >
                    <td style="width: 4%;"></td>
                    <td style="width: 4%;" valign="bottom">
                      <span style="color: red;font-size: 25px;">*</span>
                      <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">标题</span></td>
                    <td style="border-bottom:solid #ccc 1px; border-right: 0px; border-left: 0px; border-top: 0px; width: 31.5%" valign="bottom">
                      <div class="inputDeep">
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                      </div>
                    </td>
                    <td style="width: 8%"></td>
                    <td valign="bottom" style="width: 9% ;">
                      <span style="color: red;font-size: 25px;">*</span>
                      <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">紧急程度</span>
                    </td>
                    <td style="border-bottom:solid #ccc 1px; border-right: 0px; border-left: 0px; border-top: 0px; width: 31.5%;text-align: center;font-size: 30px" valign="bottom">
                      <template>
                        <el-radio v-model="radio" label="1">正常</el-radio>
                        <el-radio v-model="radio" label="2">重要</el-radio>
                        <el-radio v-model="radio" label="3">紧急</el-radio>
                      </template>
                    </td>
                    <td style="width: 6.5%"></td>
                  </tr>
                  <tr >
                    <td style="width: 4%;"></td>
                    <td style="width: 8% ;" valign="bottom">
                      <span style="color: red;font-size: 25px;">*</span>
                      <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">姓名</span></td>
                    <td style="border-bottom:solid #ccc 1px; border-right: 0px; border-left: 0px; border-top: 0px;" valign="bottom">
                      <div class="inputDeep">
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                      </div>
                    </td>
                    <td style="width: 8%"></td>
                    <td valign="bottom" style="width: 9% ;">
                      <span style="color: red;font-size: 25px;">*</span>
                      <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">部门</span>
                    </td>
                    <td style="border-bottom:solid #ccc 1px; border-right: 0px; border-left: 0px; border-top: 0px; width: 31.5%" valign="bottom">
                      <div class="inputDeep">
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                      </div>
                    </td>
                    <td style="width: 6.5%"></td>
                  </tr>
                </table>
              </div>
              <div class="division"></div>
              <div class="meet-head">
                <div>请假信息</div>
              </div>
              <div class="division"></div>
              <div class="meet-fl">
                  <table  class="meet-fl-table">
                    <tr >
                      <td style="width: 2%;height: 30px"></td>
                      <td style="width: 4% ;" valign="bottom">
                          <span style="color: red;font-size: 25px;">*</span>
                          <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">请假类型</span></td>
                      <td style="border-bottom:solid #ccc 1px; border-right: 0px; border-left: 0px; border-top: 0px; width: 15%" valign="bottom">
                        <div class="inputDeep">
                          <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </div>
                      </td>
                      <td style="width: 4%"></td>
                      <td></td>
                      <td></td>
                      <td style="width: 3%"></td>
                    </tr>
                    <tr >
                      <td style="width: 2%"></td>
                      <td valign="bottom">
                        <span style="color: red;font-size: 25px;">*</span>
                        <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">起始日期</span></td>
                      <td style="border-bottom:solid #ccc 1px; border-right: 0px; border-left: 0px; border-top: 0px; width: 15%" valign="bottom">
                        <div class="block">
                          <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期">
                          </el-date-picker>
                        </div>
                      </td>
                      <td></td>
                      <td style="width: 4%" valign="bottom">
                        <span style="color: red;font-size: 25px;">*</span>
                        <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">起始时间</span>
                      </td>
                      <td valign="bottom" style="border-bottom:solid #ccc 1px; border-right: 0px; border-left: 0px; border-top: 0px; width: 15%">
                        <el-time-select
                          v-model="value"
                          :picker-options="{
                          start: '08:30',
                          step: '00:15',
                          end: '18:30'
                        }"
                          placeholder="选择时间">
                        </el-time-select>
                      </td>
                    </tr>
                    <tr >
                      <td style="width: 2%"></td>
                      <td valign="bottom">
                        <span style="color: red;font-size: 25px;">*</span>
                        <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">结束日期</span></td>
                      <td style="border-bottom:solid #ccc 1px; border-right: 0px; border-left: 0px; border-top: 0px; width: 15%" valign="bottom">
                        <div class="block">
                          <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期">
                          </el-date-picker>
                        </div>
                      </td>
                      <td></td>
                      <td style="width: 4%" valign="bottom">
                        <span style="color: red;font-size: 25px;">*</span>
                        <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">结束时间</span>
                      </td>
                      <td valign="bottom" style="border-bottom:solid #ccc 1px; border-right: 0px; border-left: 0px; border-top: 0px; width: 15%">
                        <el-time-select
                          v-model="value"
                          :picker-options="{
                          start: '08:30',
                          step: '00:15',
                          end: '18:30'
                        }"
                          placeholder="选择时间">
                        </el-time-select>
                      </td>
                    </tr>
                    <tr >
                      <td style="width: 2%"></td>
                      <td valign="bottom">
                        <span style="color: red;font-size: 25px;">*</span>
                        <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">请假天数</span></td>
                      <td style="border-bottom:solid #ccc 1px; border-right: 0px; border-left: 0px; border-top: 0px; width: 15%" valign="bottom">
                        <div class="inputDeep">
                          <el-input v-model="input" placeholder="请输入内容"></el-input>
                        </div>
                      </td>
                      <td></td>
                      <td style="width: 4%" valign="bottom"></td>
                      <td valign="bottom" ></td>
                    </tr>
                    <tr >
                      <td style="width: 2%"></td>
                      <td valign="bottom">
                        <span style="color: red;font-size: 25px;">*</span>
                        <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">请假原因</span></td>
                      <td >
                      </td>
                      <td></td>
                      <td style="width: 4%" valign="bottom"></td>
                      <td valign="bottom" ></td>
                    </tr>
                    <tr >
                      <td style="width: 2%"></td>
                      <td valign="bottom">
                      <td colspan="4" style="border-bottom:solid #6FAFDB 1px; border-right: solid #6FAFDB 1px; border-left: solid #6FAFDB 1px; border-top: solid #6FAFDB 1px;">
                      <div class="inputDeep">
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                      </div>
                    </td>
<!--                      <td></td>-->
<!--                      <td></td>-->
<!--                      <td></td>-->
                    </tr>
                    <tr >
                      <td style="width: 2%"></td>
                      <td valign="bottom">
                        <!--           *             -->
                        <span style="color: red;font-size: 25px;"></span>
                        <span style="font-family: 微软雅黑 ;color: #A3A3A3; font-size: 20px">相关附件</span></td>
                      <td  valign="bottom">
                        <el-button type="primary">上传附件</el-button>(每个文件最大不超过50MB)
                      </td>
                      <td></td>
                      <td style="width: 4%" valign="bottom"></td>
                      <td valign="bottom" ></td>
                    </tr>
                  </table>
              </div>

            </div>
            <div class="newMess" v-show="show[1]">通知信息</div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: [true,false],
      username: '用户名',
      avatar: '',
      search: '',  //搜索内容
      radio: '1',
      input:'',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      value1: '',
      value2: '',
      value:''
    }
  },
  methods: {
    showMeet() {
      this.show.splice(0, 1, true)
      this.show.splice(1, 1, false)
    },
    showMess() {
      this.show.splice(0, 1, false)
      this.show.splice(1, 1, true)
    },
    //搜索框点击搜索
    doSearch() {
      console.log(this.search);
    },
    back() {
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
/* 利用穿透，设置input边框隐藏 */
.inputDeep>>>.el-input__inner {
  border: 0;
}
/* 如果你的 el-input type 设置成textarea ，就要用这个了 */
.inputDeep>>>.el-textarea__inner {
  border: 0;
  resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
}

.meet-fl-table tr td{
  text-align: left;
  height: 60px;
}
.span-sty{
  border-bottom: 2px solid #dbdbdb;
  width: 500px;
  height: 30px;
}
.input-underline {
  border-bottom: 2px solid #dbdbdb;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  margin-left: 30px;
  width: 200px;
}
.one-one{
  margin-top: 25px;
  float: left;
}
.meet-up-one-two{
  height: 100%;
  width: 49%;
  float: right;
  margin-top: -4.5%;
  /*clear: both;*/

}
.meet-up-one-one{
  height: 100%;
  align-content: center;
  width: 49%;
}
.meet-up-one{
  height: 50%;
  text-align: center;
}
.meet-up-two{
  height: 50%;
}
.meet-fl{
  height: 68%;
}
.meet-up{
  height: 25%;
}
.newMeet{
 width: 100%;
  height: 100%;
}
.el-header{
  display: flex;
  margin-top: 20px;
  justify-content: space-between;
}
.el-aside{
  height: 15%;
  margin-left: 40px;
  padding: 5px 10px 5px 10px;
  background-color: rgb(60, 136, 172);
  border-radius: 8px;
  overflow:hidden;
  color: white;
}
.el-main{
  height: 95%;
  margin-right: 100px;
  margin-left: 20px;
  border-radius: 10px;
  background-color: white;
}
.back{
  background: url("../../assets/img/background.png");
  background-size: 100% 100%;
  display: flex;
  height: 100%;
  vertical-align:top;
}
.right-region{
  width: 100%;
  height: 98%;
}
.img-title{
  width: 190px;
  height: 190px;
  margin-top: -45px;
  margin-left: -50px;
}
.header-div{
  margin-top: -20px;
  vertical-align:middle;
  display: flex;
}
.header-font{
  font-size: 35px;
  margin-top: 30px;
  margin-left: -50px;
  color: white;
}
.user *{
  font-size: 15px;
  vertical-align:middle;
  margin-top: 10px;
}
.user{
  margin-right: 80px;
}
.nav{
  width: 90%;
  margin: 0 auto;
  text-align: center;
  cursor:pointer;
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 8px;
}
.active{
  background-color: rgb(245, 170, 32);
}
.img-back{
  width: 20px;
  height: 20px;
}
.goback *{
  font-size: 15px;
  vertical-align:middle;
}
.goback{
  width: 90%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 10px;
}
/* 请假流程第一层样式 */
.meet-head{
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 15px;
  margin-top: 1%;
}
/* 会议单个按钮样式 */
.meet-button{
  background-color: rgb(60, 136, 172);
  color: white;
  border-radius: 5px;
}
/* 分割线 */
.division{
  width: 100%;
  margin: 0 auto;
  height: 2px;
  background-color: rgb(184, 184, 184);
}
/* 按钮区域样式 */
.meet-button-all{
  margin-right: 60px;
}
</style>
